<template>
    <div id="addFill">
       <div class="jx-content">
          <div class="topcoumt">
                <div class="search-box fl">
                    <el-form :inline="true"  :model="Form" label-width="120px" class="fl">
                        <el-form-item label="关键字">
                            <el-input v-model="Form.name" placeholder="请输入关键字"></el-input>
                        </el-form-item>
                    </el-form> 
                      <button class="button-style" @click="searchFn">搜 索</button> 
                 </div>
                 <div class="btn-group fr">
                    <button class="button-style" @click="Liftingwords " >解 除 禁 言</button>
                </div>
            </div>
            <div class="tablelist">
               <el-table :data="tablelist" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="userName" label="学生姓名" ></el-table-column>
                <el-table-column prop="userId" label="学号" ></el-table-column>
                <el-table-column prop="sex" label="性别">
                    <template slot-scope="scope">
                       {{scope.row.sex==1?'男':'女'}}
                    </template>
                </el-table-column>
                <el-table-column prop="telephoneNumber" label="手机号"></el-table-column>
                <el-table-column prop="email" label="邮箱"></el-table-column>
             </el-table>
            </div>
              <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pagesize"
            layout="total, prev, pager, next, jumper"
            :total="totalCount"
            ></el-pagination>
       </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                Form:{
                    name:''
                },
                currentPage: 1,
                pagesize: 10,
                multipleSelection:[],
                totalCount: 1000,
                tablelist:[
                    {
                        userName: "2016-05-02",
                        name: "王小虎",
                        telephoneNumber: "22222222222222222",
                        num:111,
                        email: "laiyuan"
                    },
                ]
            }
        },
        created () {
          this.init()
        },
        methods: {
            init() {
                let self = this
                self.$http.get('/tes/problemCommunication/forbiddenWordsListPage?pageNum='+self.currentPage +'&pageSize='+self.pagesize +'&courseId='+1+'&keyWords='+self.Form.name).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        //console.log(res.data.content)
                        self.tablelist = res.data.content
                        self.totalCount = res.data.total
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //搜索
            searchFn(){
                this.currentPage = 1
                this.init()
            },
            //分页
			handleSizeChange: function (size) {
				this.pagesize = size;
			},
			handleCurrentChange: function(currentPage) {
                this.currentPage = currentPage
                this.init()
            },
            //全选
			handleSelectionChange(val) {
				let valArr = []
				for(let i = 0; i < val.length; i++){
					valArr.push(val[i].userId)
				}
                this.multipleSelection = valArr
                
            },
            //解除禁言
            Liftingwords(){
                let self = this;
				if(self.multipleSelection.length == 0){
                    self.$message({
                        message: '请选择要解除禁言的人员',
                        type: 'warning'
                    })
					return
                }
                let idList = ''
				for(let item in self.multipleSelection){
					if(item == 0){
						idList = self.multipleSelection[item]
					}else{
						idList = idList + '&' + 'idList='+self.multipleSelection[item]
                    }
                }
               // console.log(idList)
				self.$confirm('确认将选中的人员解除禁言吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					self.$http.post('/tes/problemCommunication/forbiddenWords',{
                        userId:idList,
                        courseId:1,
                        isForbidden:false
                    }).then((response) => {
						let res = response.data;
						if(res.code == '200'){
                            self.$message({
                                message: '解除禁言成功',
                                type: 'success'
                            })
							self.init()
						}else if(res.code == '401'){
                            self.$router.replace({
                                path:'/login'
                            })
                        }else{
                            self.init()
                            self.$message.error(res.message)
                        }
					},(err) => {
						console.log('err');
					})
				}).catch(() => {
				})
            }

        }
    }
</script>

<style lang="scss">
 @import "./../../../styles/layout/color_variables";
  #addFill {
    width: $width;
    margin: 20px auto;
    color: #727272;
    .topcoumt{
       overflow: hidden;
       .el-input .el-input__inner{
        width: 300px;
      }
    }
    
    
  }
</style>